<template>
  <view class="content">
    <view class="studentInfo-warp">
      <view class="studentInfo-text">
        <view class="student-name">姓名：</view>
        <view class="student-info">{{ studentInfo.studentName }}</view>
      </view>
      <view class="studentInfo-text">
        <view class="student-name">性别：</view>
        <view class="student-info">{{
          studentInfo.studentSex ? '男' : '女'
        }}</view>
      </view>
      <view class="studentInfo-text">
        <view class="student-name">学号：</view>
        <view class="student-info">{{ studentInfo.studentAccount }}</view>
      </view>
      <view class="studentInfo-text">
        <view class="student-name">班级：</view>
        <view class="student-info">{{ studentInfo.studentClass }}</view>
      </view>
      <view class="studentInfo-text">
        <view class="student-name">手机号：</view>
        <view class="student-info">{{ studentInfo.studentPhone }}</view>
      </view>
      <view class="studentInfo-text">
        <view class="student-name">邮箱：</view>
        <view class="student-info">{{ studentInfo.studentEmail }}</view>
      </view>

      <view>
        <view class="student-name">个人头像：</view>
        <image
          class="img"
          :src="'http://192.168.1.114:8888' + studentInfo.studentFace"
        ></image>
      </view>
      <view v-if="page == 2">
        <u-upload
          style="margin-top: 20upx"
          :fileList="fileList1"
          @afterRead="afterRead"
          @delete="deletePic"
          name="1"
          multiple
          :previewFullImage="true"
          :maxCount="1"
        ></u-upload>
      </view>
    </view>

    <view class="loginBtn">
      <view class="btnValue" @click="handleInfo">{{
        page == 1 ? '删除学生' : '修改信息'
      }}</view>
    </view>
  </view>
</template>

<script>
import api from '@/api/student/api.js'
import tapi from '@/api/teach/api.js'
export default {
  data() {
    return {
      page: 2, // 哪个页面跳转过来的 1为老师查看学生  2为学生
      studentInfo: {},
      fileList1: [],
      course_id: 0, // 由老师跳过来则带有课程id
    }
  },

  methods: {
    handleInfo() {
      if (this.page == 2) {
        let parme = {}
        parme.studentId = this.studentInfo.studentId
        parme.account = this.studentInfo.studentAccount
        parme.password = this.studentInfo.studentPassword
        parme.name = this.studentInfo.studentName
        parme.sex = this.studentInfo.studentSex
        parme.avatar = this.studentInfo.studentAvatar
        parme.major = this.studentInfo.studentClass
        parme.face = this.studentInfo.studentFace
        parme.phone = this.studentInfo.studentPhone
        parme.email = this.studentInfo.studentEmail
        this.$http
          .getMethod(api.modifyStudent, parme)
          .then((res) => {
            if (res.code != 200) {
              uni.showToast({
                title: res.message,
                icon: 'none',
              })
            } else {
              uni.showToast({
                title: res.message,
                icon: 'none',
              })
              console.log(res.data)
            }
          })
          .catch((error) => {
            console.log(error)
          })
      } else {
        let parme = {}
        parme.courseId = this.course_id
        parme.studentId = this.studentInfo.studentId
        this.$http
          .getMethod(tapi.deleteCourseStudent, parme)
          .then((res) => {
            if (res.code != 200) {
              uni.showToast({
                title: res.message,
                icon: 'none',
              })
            } else {
              uni.showToast({
                title: res.message,
                icon: 'none',
              })
              uni.navigateTo({
                url: '/pages/teacher/detailed/detailed?id=' + this.course_id,
              })
            }
          })
          .catch((error) => {
            console.log(error)
          })
      }
    },
    deletePic(event) {
      this[`fileList${event.name}`].splice(event.index, 1)
    },
    // 新增图片
    async afterRead(event) {
      // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
      let lists = [].concat(event.file)
      let fileListLen = this[`fileList${event.name}`].length
      lists.map((item) => {
        this[`fileList${event.name}`].push({
          ...item,
          status: 'uploading',
          message: '上传中',
        })
      })
      for (let i = 0; i < lists.length; i++) {
        const result = await this.uploadFilePromise(
          lists[i].url,
          this.studentInfo.studentId
        )
        let item = this[`fileList${event.name}`][fileListLen]
        this[`fileList${event.name}`].splice(
          fileListLen,
          1,
          Object.assign(item, {
            status: 'success',
            message: '',
            url: result,
          })
        )
        fileListLen++
      }
    },
    uploadFilePromise(url, name) {
      return new Promise((resolve, reject) => {
        let a = uni.uploadFile({
          url: api.saveImg, // 仅为示例，非真实的接口地址
          filePath: url,
          name: 'photo',
          formData: {
            type: 4,
            id: name,
          },
          success: (res) => {
            resolve(res.data.data)
            let data = res.data
            data = JSON.parse(data)
            console.log(data)
            this.studentInfo.studentFace = data.message
          },
        })
      })
    },
  },
  onLoad(option) {
    if (option.page) {
      this.page = option.page
    }
    if (option.course_id) {
      this.course_id = option.course_id
    }
    let parme = {}
    parme.type = 2
    parme.column = 'student_id'
    parme.value = option.id
    this.$http
      .getMethod(api.findAccountByColumn, parme)
      .then((res) => {
        if (res.code != 200) {
          uni.showToast({
            title: res.message,
            icon: 'none',
          })
        } else {
          uni.showToast({
            title: res.message,
            icon: 'none',
          })
          console.log(res.data)
          this.studentInfo = res.data[0]
        }
      })
      .catch((error) => {
        console.log(error)
      })
  },
}
</script>

<style scoped lang="less">
.content {
  width: 95vw;
  height: 100vh;
  padding: 20upx;
  .studentInfo-warp {
    border: 1upx solid black;
    border-radius: 10upx;
    padding: 20upx;
    .studentInfo-text {
      border-bottom: 1upx solid black;
      display: flex;
      line-height: 70upx;
      height: 70upx;
      .student-name {
        width: 20%;
      }
      .student-info {
        width: 70%;
      }
    }
  }
}

.loginBtn {
  width: 100%;
  height: 80upx;
  background: #77b307;
  border-radius: 50upx;
  margin-top: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.loginBtn .btnValue {
  color: white;
}
</style>
